<template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item,index) in articles" :key="index">
            <router-link :to="`/detail/${item.id}`" target="_blank">
                <img :src="item.titleImg" width="350px" height="360px">
            </router-link>
            <p class="swiper-title">{{item.title}}</p>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    import {article_query} from "@/api/front";
    export default {
        name: "RSwiper",
        components:{Swiper,SwiperSlide},
        data(){
            return{
                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination'
                    }
                },
                articles:[],
            }
        },
        mounted() {
            this.getArticles();
        },
        methods:{
            getArticles(){
                article_query({channelId:31}).then(res=>{
                    this.articles = res.data;
                })
            }
        }
    }
</script>

<style scoped>
.swiper-title{
    position: absolute;
    bottom: 0px;
    background-color: rgba(0,0,0,.6);
    color: #ffffff;
    height: 40px;
    line-height: 40px;
}
</style>